<template>
	<view>
		<view class="page-header" :style="[moduleCss,dynamicStyle,moduleBgCss]">
			<view class="header-content " v-show="propsData.params.showText == 1 && styleType == 1"
				:style="[menuButtonStyle]">
				<view class="back-icon" @click="goBack" v-if="showBack && !isIndexPage">
					<i class="iconfont icon-fanhui"></i>
				</view>
				<text :class="[showBack && !isIndexPage ? 'showReturn' : '']"
					v-if="propsData.params.showText == 1 && styleType == 1"
					:style="[headerTextStyle]">{{ propsData.params.text }}</text>
			</view>
			<!-- 门店选择 -->
			<view class="md-section" :class="capsuleType == 1 ? 'black-md' : ''" v-if="isIndexPage && styleType == 2"
				:style="[mdBoxStyle]" @click="gotoSelectMd">
				<view class="md-media">
					<image v-if="mdData" lazy-load :src="mdData.cover_url" mode="" />
				</view>
				<view v-if="mdData" class="md-name" :style="[headerTextStyle]">{{
          mdData.name
        }}</view>
				<i class="iconfont icon-arrow-right" :style="{ color: headerTextStyle.color }"></i>
			</view>
		</view>
		<view class="hold-place" :class="{ 'h': swiperTypeVal=='4' }"
			:style="[{ height: 'calc(' + statusBarHeight + 'px + 88rpx)' }]"></view>
	</view>
</template>

<script>
	import {
		diyMixin
	} from "../mixins/diy";
	import {
		mapGetters
	} from "vuex";

	export default {
		props: {
			propsData: {
				type: Object,
				default: () => {
					return {};
				}
			},
			page: {
				type: Object,
				default: () => {
					return {};
				}
			},
			reloadHeader: {
				type: Boolean,
				default: false
			},
			cash: {
				type: Number,
				default: false
			}
		},
		mixins: [diyMixin], //混入文件
		watch: {
			reloadHeader(val) {
				if (val) {
					this.initMdData();
				}
			},
			cash: function(newVal, oldVal) {
				console.log('111,',newVal,oldVal)
				console.log('swiperTypeVal,',this.swiperTypeVal)
				 if (newVal !== oldVal) {
				      uni.$emit('cash', this.cash);
				    }
				if (this.swiperTypeVal === '4') {
					if (this.cash == 1) {
						this.csts = this.propsData.moduleCss.backgroundColor
					} else {
						this.csts = "#ffffff00"
					}
				} 
			}
		},
		data() {
			return {
				mdData: {},
				statusBarHeight2: 0,
				isSelectMd: false,
				swiperTypeVal: '',
				csts: '',
			};
		},
		computed: {
			hasSingleStore() {
				return this.$store.getters.has_is_one_store;
			},
			menuButtonStyle() {
				// #ifdef APP-PLUS || H5
				let obj = {
					top: (this.statusBarHeight || this.statusBarHeight2) + "px",
					height: "88rpx",
					lineHeight: "88rpx"
				};
				// #endif
				// #ifndef APP-PLUS || H5
				let obj = {
					top: this.menuButtonInfo.top + "px",
					height: this.menuButtonInfo.height + "px"
				};
				// #endif

				if (this.propsData.params.css.textAlign) {
					let textAlign = "flex-start";

					switch (this.propsData.params.css.textAlign) {
						case "left":
							textAlign = "flex-start";
							break;

						case "right":
							textAlign = "flex-end";
							break;

						case "center":
							textAlign = "center";
							break;

						default:
							break;
					}

					obj["justifyContent"] = textAlign;

					if (this.propsData.params.styleType === "2") {
						obj["justifyContent"] = "flex-start";
					} else {
						obj["justifyContent"] = textAlign;
					}
				}

				return obj;
			},
			mdBoxStyle() {
				// let topLeft = this.systemInfo.windowWidth - this.menuButtonInfo.right;
				let topLeft = this.systemInfo.windowWidth * 0.032;
				// #ifndef APP-PLUS || H5
				let topWidth =
					this.menuButtonInfo.right - topLeft * 2 - this.menuButtonInfo.width;
				// #endif
				let obj = {
					// #ifdef APP-PLUS || H5
					top: (this.statusBarHeight || this.statusBarHeight2) + "px",
					height: "88rpx",
					width: "100%",
					lineHeight: "88rpx",
					// #endif
					// #ifndef APP-PLUS || H5
					top: this.menuButtonInfo.top + "px",
					height: this.menuButtonInfo.height + "px",
					width: topWidth + "px",
					// #endif
					left: topLeft + "px"
				};
				return obj;
			},
			moduleCss() {
				console.log('propsData,',this.propsData)
				if (this.swiperTypeVal === '4') {
					return {
						...this.propsData.moduleCss,
						backgroundColor: "#ffffff00",
						height: `calc(${this.statusBarHeight || this.statusBarHeight2 || 0}px + 88rpx)`
					};
				}
				return {
					...this.propsData.moduleCss,
					height: "calc(" +
						(this.statusBarHeight || this.statusBarHeight2 || 0) +
						"px + 88rpx)"
				};
			},
			headerTextStyle() {
				let style = JSON.parse(JSON.stringify(this.propsData.params.css));
				if (style?.fontNum) {
					style.fontSize = style.fontNum * 2 + "rpx";
				}

				return style;
			},
			capsuleType() {
				return this.propsData.params.capsuleType;
			},
			isIndexPage() {
				return this.page.is_index == 1;
			},
			styleType() {
				return this.propsData.params.styleType;
			},
			mdStyle() {
				return this.propsData.params.mdStyle || 1;
			},
			showBack() {
				let routes = getCurrentPages() || [];
				if (routes && routes.length > 1) return true;
				return false;
			},
			
			  dynamicStyle() {
			    return {
			       ...(this.swiperTypeVal != 4 ? { backgroundColor: this.propsData.moduleCss.backgroundColor } : {backgroundColor: this.csts}) 
			    };
			  }
			
		},
		methods: {
			setHtight(){
				uni.$emit('height',this.moduleCss.height)
			},
			async initMdData() {
				if (!this.isIndexPage) return;
				this.mdData = null;
		
					const res = await this.$allrequest.shop.getInfo();
					let name, cover_url;
					try {
						name = res.data.name || this.stores.name;
						cover_url = res.data.logo || this.stores.web_log;
					} catch (error) {
						name = uni.getStorageSync("storeName") || this.stores.name;
						cover_url = uni.getStorageSync("storeLogo") || this.stores.web_log;
					}

					if(uni.getStorageSync('storeMdData')){
						let storeMdData = JSON.parse(uni.getStorageSync('storeMdData'))
						name = storeMdData.name;
						cover_url = storeMdData.cover_url;
					}

					this.mdData = {
						id: res.data.id || 0,
						name,
						mobile: this.stores.mobile,
						cover_url,
						pic_url: this.stores.store_share_logo, // logo
						shop_time: this.stores.shop_time || "",
						address: this.stores.address || ""
					};
			},
			gotoSelectMd() {
				this.$utils.toUrl("/pages/md/md-list");
			},
			goBack() {
				uni.navigateBack();
			}
		},
		filters: {},
		mounted() {
			this.setHtight()
		},

		created() {
			uni.$on('swiperType', (data) => {
				this.swiperTypeVal = data.val;
				if (this.swiperTypeVal == 4) {
					this.csts = "#ffffff00"
				}
			});
			const res = uni.getSystemInfoSync();
			let num = res.statusBarHeight;
			// #ifdef MP-TOUTIAO
			num = 0;
			// #endif
			this.statusBarHeight2 = num;
		},

		onReady() {
			let frontColor = this.capsuleType == 1 ? "#000000" : "#ffffff";
			uni.setNavigationBarColor({
				frontColor: frontColor, 
				backgroundColor: "#ffffff"
			});
		}
	};
</script>

<style scoped lang="scss">
	.h {
		height: 0 !important;
	}

	.page-header {
		width: 100%;
		background-color: #fa2c1b;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10000;

		.module-bg {
			width: 100%;
			height: 100%;
			z-index: -1;
			position: absolute;
			left: 0;
			top: 0;
		}

		.header-content {
			width: 93.6%;
			font-size: 36rpx;
			font-weight: 600;
			color: #ffffff;
			text-align: center;
			position: absolute;
			left: 4%;
			top: 0;
			z-index: 11;
			display: flex;
			justify-content: center;
			align-items: center;

			.back-icon {
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 111;
				display: flex;
				align-items: center;

				.iconfont {
					color: #262626;
				}
			}
		}

		.md-section {
			width: calc(100% - 108px);
			height: 32px;
			position: absolute;
			left: 7px;
			top: 0;
			z-index: 11;
			display: flex;
			align-items: center;

			.md-media {
				width: 6.4vw;
				height: 6.4vw;
				background: #f2f2f2;
				border: 1px solid #ffffff;
				border-radius: 50%;
				margin-right: 1.6vw;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			.md-name {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #ffffff;
				max-width: 85%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.icon-arrow-right {
				font-size: 21rpx;
				font-weight: bolder;
				position: relative;
				color: #ffffff;
			}

			.icon-map-filling1 {
				font-size: 18px;
				position: relative;
				color: #ffffff;
			}
		}

		.black-md {

			.iconfont,
			.md-name {
				color: #000000;
			}
		}
	}

	.hold-place {
		width: 100%;
	}

	.single-store {
		width: 100%;
		height: 100%;
		font-size: 30rpx;
		display: inline-flex;
		align-items: center;
	}

	.single-store image {
		width: 33px;
		height: 33px;
		display: inline-block;
		border-radius: 50%;
		margin-right: 30rpx;
		border: 1px solid #ffffff;
	}

	.single-store .single-store-name {
		text-align: left;
	}

	.single-store .single-store-line {
		width: 2px;
		height: 18px;
		background-color: rgba(255, 255, 255, 0.1);
		margin: 0 25rpx;
	}

	.single-store .iconfont {
		font-size: 45rpx;
	}

	.single-store button {
		display: inline-block;
		margin: 0;
		padding: 0;
		background-color: transparent;
		line-height: normal;
		text-align: left;
	}

	.single-store button::after {
		border: none;
	}

	.showReturn {
		padding-left: 40rpx !important;
	}
</style>